<template>
  <div class="app-tabbar">
    <TabScroll @change="changeTab"></TabScroll>

    <div class="tabbar-suffix">
      <i class="sv-icon-change cursor-pointer fs-20" title="刷新" @click="tapRefresh"></i>
    </div>
    <div class="tabbar-suffix">
      <Maximize class="fs-20"></Maximize>
    </div>
  </div>
</template>

<script setup>
import { useTabbar } from '@/hooks/useTabbar'
import TabScroll from './TabScroll.vue'
import Maximize from '../../widgets/Maximize/Maximize.vue'

const curTab = ref({})

function changeTab(tab) {
  curTab.value = tab
}

function tapRefresh() {
  useTabbar().refreshCurrentPage(curTab.value)
}
</script>

<style lang="scss" scoped>
.app-tabbar {
  height: var(--tabbar-height);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  user-select: none;

  .tabbar-suffix {
    height: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid var(--border-color);
    cursor: pointer;
  }
}
</style>
